<template>
  <view class="main">
    <view class="header_bg">
      <view class="month_money flex_col_center">
        <text>
          月缴(元)
        </text>
        <text class="mt20">
          {{ (monthMoney).toFixed(2) }}
        </text>
      </view>
      <view class="content flex_between_center">
        <view class="item flex_col_center">
          <text class="item_name">社保月缴(元)</text>
          <text class="item_num">{{ (socialMoney).toFixed(2) }}</text>
        </view>
        <view class="line"></view>
        <view class="item flex_col_center">
          <text class="item_name">公积金月缴(元)</text>
          <text class="item_num">{{ (fundMoney).toFixed(2) }}</text>
        </view>
      </view>
    </view>
    <form class="form">
      <view class="form_item flex_between_center">
        <view class="title">社保缴纳基数</view>
        <input name="input" type="number" placeholder="0" v-model="socialTax" />
      </view>
      <view class="form_item flex_between_center">
        <view class="title">公积金缴纳基数</view>
        <input name="input" type="number" placeholder="0" v-model="fundTax" />
      </view>
      <view class="form_item flex_between_center">
        <view class="title">公积金缴纳比列</view>
        <picker @change="PickerChange" :value="index" :range="picker">
          <view class="picker">
            {{ index > -1 ? picker[index] : '请选择比例' }}
          </view>
        </picker>
      </view>
    </form>
    <view class="footer">
      <view class="btns">
        <view class="reset_btn" @click="resetBtn">
          重 置
        </view>
        <view class="count_btn" @click="countBtn">
          计 算
        </view>
      </view>
    </view>
  </view>
</template>

<script type="text/javascript" src="plus-confusion://../tools/shebao/index"></script>

<style lang="scss" scoped>
.main {
  position: relative;
  background-color: #F3F4F5;
  overflow: hidden;

  .header_bg {
    width: 100%;
    height: 400rpx;
    background: linear-gradient(180deg, #297AFE 0%, #47B1FD 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .month_money {
      margin-top: 80rpx;
      font-size: 44rpx;
      color: #ffff;
    }

    .content {
      margin: 0 auto;
      width: 100%;
      height: 160rpx;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 20rpx;

      .line {
        width: 1rpx;
        height: 100rpx;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 33rpx;
      }

      .item {
        margin: 0 auto;
        color: #FFFFFF;
        overflow: hidden;

        .item_num {
          margin-top: 20rpx;
          font-size: 30rpx;
        }

        .item_name {
          font-size: 32rpx;
        }
      }
    }
  }

  .form {
    .form_item {
      background-color: #ffffff;
      padding: 1px 14px;
      min-height: 48px;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 160rpx;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;

    .btns {
      padding: 0 30rpx;
      flex: 1;
      display: flex;
      justify-content: space-between;

      .reset_btn {
        width: 220rpx;
        height: 90rpx;
        background-color: #f6f6f6;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
      }

      .count_btn {
        width: 440rpx;
        height: 90rpx;
        background-color: #2979ff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
}</style>

